<!-- @format -->

<template>
  <div class="my-tabbar">
    <div
      class="tab-item"
      v-for="(item, index) in list"
      :key="index">
      <span
        class="iconfont"
        :class="item.iconText"></span>
      <span>{{ item.text }}</span>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      list: {
        // 父传子一个list数组，组件内拿到list来循环遍历生成很多个 tab-item
        type: Array,
        required: true
      }
    }
  }
</script>

<style lang="less" scoped>
  .my-tabbar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    border-top: 1px solid #ccc;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: white;
    .tab-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }

  .current {
    color: #1d7bff;
  }
</style>
